<template>
  <vue-office-pdf v-loading="loading" :src="fileUrl" @rendered="rendered" />
</template>

<script>
//引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf";
import base from "@/utils/http/base"; // 导入接口域名列表

export default {
  components: {
    VueOfficePdf,
  },
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: true,
      //   pdf: "http://10.1.79.98:8080/static/pdf.pdf", //设置文档地址
      fileUrl: "",
    };
  },
  watch: {
    info: {
      handler(newValue, oldValue) {
        this.loading = true;
        this.fileUrl = `${base.url}/knowledge_base${newValue.file_url.split("/knowledge_base")[1]}`;
      },
      deep: true,
      immediate: true,
    },
  },
  // computed: {
  //   fileUrl() {
  //     return `${base.url}/knowledge_base${
  //       this.info.file_url.split("/knowledge_base")[1]
  //     }`;
  //   },
  // },
  methods: {
    rendered() {
      this.loading = false;
      console.log("渲染完成");
    },
  },
};
</script>
<style lang="scss" scoped>
.vue-office-pdf {
  width: 100%;
  height: calc(100% - 40px);
  ::v-deep .vue-office-pdf-wrapper {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    > canvas {
      width: 100% !important;
    }
  }
}
</style>

<!-- <template>
  <div class="interviewVideo_main" id="videoContainer">
    <canvas
      v-for="pageIndex in pdfPages"
      :id="`pdf-canvas-` + pageIndex"
      :key="pageIndex"
      style="display: block"
    ></canvas>
  </div>
</template>
<script>
import * as pdfjsLib from "pdfjs-dist/build/pdf.js";
export default {
  components: {},
  data() {
    return {
      pdfDoc: {},
      pdfPages: 0,
      pdfUrl: "http://10.1.79.98:8080/static/pdf.pdf",
      pdfScale: 1,
    };
  },
  mounted() {
    this.loadFile(this.pdfUrl);
  },
  methods: {
    async loadFile(url) {
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.9.179/pdf.worker.min.js";
      const loadingTask = pdfjsLib.getDocument(url);

      var _this = this;
      loadingTask.promise.then((pdf) => {
        console.log(pdf);
        this.pdfDoc = pdf;
        this.pdfPages = pdf.numPages;
        this.$nextTick(() => {
          _this.renderPage(1);
        });
      });
    },
    renderPage(num) {
      this.pdfDoc.getPage(num).then((page) => {
        const canvasId = "pdf-canvas-" + num;
        const canvas = document.getElementById(canvasId);
        const ctx = canvas.getContext("2d");
        const dpr = window.devicePixelRatio || 1;
        const bsr =
          ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio ||
          1;
        const ratio = dpr / bsr;
        const viewport = page.getViewport({ scale: this.pdfScale });
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = viewport.width + "px";
        canvas.style.height = viewport.height + "px";
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        const renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };
        page.render(renderContext);
        if (num < this.pdfPages) {
          this.renderPage(num + 1);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#videoContainer {
  width: 100%;
  height: calc(100% - 40px);
  overflow: auto;
  > canvas {
    width: 100% !important;
  }
}
</style> -->
